<template>
  <div class="template-form">
    <el-form :model="templateForm" label-width="120px">
      <el-form-item label="模板名称">
        <el-input
          v-model="templateForm.name"
          placeholder="请输入模板名称"></el-input>
      </el-form-item>

      <el-form-item label="模板描述">
        <el-input
          v-model="templateForm.description"
          type="textarea"
          placeholder="请输入模板描述">
        </el-input>
      </el-form-item>

      <el-form-item label="规格属性">
        <el-card
          v-for="(spec, index) in templateForm.specs"
          :key="index"
          class="spec-card">
          <div slot="header" class="clearfix">
            <span>规格 {{ index + 1 }}</span>
            <el-button
              style="float: right; padding: 3px 0"
              type="text"
              @click="removeSpec(index)">
              删除
            </el-button>
          </div>

          <el-form-item label="属性名称">
            <el-input v-model="spec.name" placeholder="如：Color"></el-input>
          </el-form-item>

          <el-form-item label="属性类型">
            <el-select v-model="spec.type" placeholder="请选择属性类型">
              <el-option label="售卖属性" :value="0"></el-option>
              <el-option label="基础属性" :value="1"></el-option>
              <el-option label="Overview属性" :value="2"></el-option>
              <el-option label="体积重量属性" :value="3"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="可选值">
            <el-tag
              v-for="tag in spec.valuesJsonList"
              :key="tag"
              closable
              @close="removeValue(index, tag)">
              {{ tag }}
            </el-tag>
            <el-input
              v-if="spec.inputVisible"
              v-model="spec.inputValue"
              ref="saveTagInput"
              size="small"
              class="input-new-tag"
              @keyup.enter.native="addValue(index)"
              @blur="addValue(index)" />
            <el-button
              v-else
              class="button-new-tag"
              size="small"
              @click="showInput(index)">
              + 添加值
            </el-button>
          </el-form-item>

          <el-form-item label="SKU影响">
            <el-switch
              v-model="spec.isSku"
              :active-value="1"
              :inactive-value="0"></el-switch>
          </el-form-item>

          <el-form-item label="允许自定义">
            <el-switch
              v-model="spec.isCustom"
              :active-value="1"
              :inactive-value="0"></el-switch>
          </el-form-item>

          <el-form-item label="单位">
            <el-input v-model="spec.unit" placeholder="如：mm、kg"></el-input>
          </el-form-item>

          <el-form-item label="排序">
            <el-input-number v-model="spec.sort" :min="0"></el-input-number>
          </el-form-item>
        </el-card>

        <el-button type="primary" icon="el-icon-plus" @click="addSpec">
          添加规格属性
        </el-button>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm">创建模板</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";
import { addProductSpecTemplate01 } from "@/api/product/productSpecTemplate";
import { useRouter } from "vue-router";

export default {
  name: "TemplateForm",
  data() {
    const router = useRouter();
    return {
      templateForm: {
        name: "",
        description: "",
        specs: [],
      },
      router,
    };
  },
  methods: {
    addSpec() {
      this.templateForm.specs.push({
        name: "",
        type: 0,
        valuesJsonList: [],
        valuesJson: "[]", // 用于后端传输的 JSON 字符串
        isSku: 0,
        isCustom: 0,
        unit: "",
        sort: 0,
        inputVisible: false,
        inputValue: "",
      });
    },

    removeSpec(index) {
      this.templateForm.specs.splice(index, 1);
    },

    showInput(specIndex) {
      const spec = this.templateForm.specs[specIndex];
      spec.inputVisible = true;
      this.$nextTick(() => {
        this.$refs.saveTagInput[specIndex].focus();
      });
    },

    addValue(specIndex) {
      const spec = this.templateForm.specs[specIndex];
      const inputValue = spec.inputValue;
      if (inputValue) {
        spec.valuesJsonList.push(inputValue);
        // 更新 JSON 字符串
        spec.valuesJson = JSON.stringify(spec.valuesJsonList);
      }
      spec.inputVisible = false;
      spec.inputValue = "";
    },

    removeValue(specIndex, value) {
      const spec = this.templateForm.specs[specIndex];
      spec.valuesJsonList.splice(spec.valuesJsonList.indexOf(value), 1);
      // 更新 JSON 字符串
      spec.valuesJson = JSON.stringify(spec.valuesJsonList);
    },
    addProductSpecTemplate01Api(template) {
      addProductSpecTemplate01(template)
        .then((res) => {
          this.$message({
            message: "创建成功",
            type: "success",
          });
          setTimeout(() => {
            this.router.push({ path: "/product/spec-template" });
          }, 1000);
        })
        .catch((err) => {
          console.log(err, "创建失败");
        });
    },
    submitForm() {
      // 准备提交数据
      const submitData = {
        name: this.templateForm.name,
        description: this.templateForm.description,
        specs: this.templateForm.specs.map((spec) => ({
          name: spec.name,
          type: spec.type,
          valuesJson: spec.valuesJson, // 已经是 JSON 字符串格式
          isSku: spec.isSku,
          isCustom: spec.isCustom,
          unit: spec.unit,
          sort: spec.sort,
        })),
      };

      // 发送请求
      //
      this.addProductSpecTemplate01Api(submitData);
    },

    resetForm() {
      this.templateForm = {
        name: "",
        description: "",
        specs: [],
      };
    },
  },
};
</script>

<style scoped>
.spec-card {
  margin-bottom: 20px;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
</style>
